<template>
	<view style="padding-bottom: 40rpx;">
		<!-- 登录信息 -->
		<view class="info flex align-center justify-center" >
			<view class="info-box">
				<view @click="status? null:goNav('/pages/login/login')"
		
					class="info-box-c flex align-center justify-between" style="display: flex;justify-content: center;">
					<view class="info-box-c-l flex align-center">
						<view class="info-box-c-l-avatar">
							<image :src="avatar?avatar:'../../static/images/logo.jpg'" mode=""></image>
						</view>
						<view class="info-box-c-l-name">
							<view class="info-box-c-l-name-t">
								{{userName?userName:'未登录'}}
							</view>
							
							<view class="info-box-c-l-name-b" v-if="invitationCode">
								ID:{{invitationCode}}
							</view>
						</view>
					</view>
					<!-- <view class="info-box-c-r">
						<u-icon name="arrow-right" color="#F6F6F6" size="28"></u-icon>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 统计 -->
<!-- 		<view class="statistics flex align-center justify-center">
			<view class="statistics-box flex align-center justify-between">
				<view class="statistics-box-item" @click="goNav('/me/jilu/myLove')">
					<view class="statistics-box-item-top">
						{{myLoveNum}}
					</view>
					<view class="statistics-box-item-btn">
						我的喜欢
					</view>
				</view>
				<view class="statistics-box-item" @click="goNav('/me/jilu/histor')">
					<view class="statistics-box-item-top">
						{{myZhui}}
					</view>
					<view class="statistics-box-item-btn">
						我的追剧
					</view>
				</view>
				<view class="statistics-box-item" @click="goNav('/me/jifen/jifen')">
					<view class="statistics-box-item-top">
						{{jifen}}
					</view>
					<view class="statistics-box-item-btn">
						我的积分
					</view>
				</view>
			</view>
		</view> -->
		<view v-if="isVips == '是'" @click="goNav('/pages/me/vip/index')" class="vip flex align-center justify-center">
			<view class="vip-box flex align-center justify-between">
				<view class="vip-box-l flex align-center">
					<view class="vip-box-l-l">
						{{isVIP?'会员用户':'开通会员'}}
					</view>
					<image src="../../static/images/me/Vips.png" mode=""></image>
					<view class="vip-box-l-r">
						{{endTime?endTime+'到期':'升级VIP，省更多钱'}}
					</view>
				</view>
				<view v-if="!isVIP" class="vip-box-r flex align-center justify-center">
					立即开通
				</view>
			</view>
		</view>
	<!-- <view style="padding:0 14px">
				<button
				  open-type="im"
				  :data-im-id="imId"
				  @im="imCallback"
				  @error="onimError"
				  style="    width: 101px;
					height: 33px;
					background-color: #5173F8;
					color: #FFFFFF;
					font-size: 13px;
					margin:10px"
				>
				  联系客服
				</button>
		</view> -->
		
		<!-- 钱包 -->
		<view class="money flex align-center justify-center">
			<view class="money-box">
				<view class="money-box-title flex align-center justify-between">
					<!-- <view class="money-box-title-l">
						钱包余额
					</view>
					<view @click="isShoMoney = !isShoMoney" class="money-box-title-r">
						<u-icon :name="isShoMoney?'eye':'eye-off'" color="#F6F6F6" size="40"></u-icon>
					</view> -->
					<view class="">
						充值瓜币
					</view>
					<view class="">
						赠送瓜币
					</view>
				</view>
				<view class="money-box-price">
					<view class="">
							{{formatNumber(moneyNum) }}
					</view>
					<view class="">
							{{formatNumber(moneyNum2)}}
							<!-- {{moneyNum2}} -->
					</view>
					
				
					<!-- <block v-else>
						****
					</block> -->
					<!-- <block v-else>
						****
					</block> -->
				</view>
				<view class="money-box-btn flex align-center justify-between">
					<!-- <view class="money-box-btn-l" @click="goNav('/me/invite/index')"> -->
					<view class="money-box-btn-l">
						<!-- <image src="../../static/images/me/qrCode.png" mode=""></image> -->
					</view>
					<view class="money-box-btn-r flex align-center">
						<!-- '<view @click="goNav('/me/integral/inviteDet')"
							class="money-box-btn-r-t flex align-center justify-center">
							提现
						</view>' -->
						<view @click="goNav('/me/wallet/wallet')"
							class="money-box-btn-r-c flex align-center justify-center">
							充值
						</view>
					
					</view>
				</view>
			</view>
		</view>
		<!-- 常用工具 -->
		<view class="tool flex align-center justify-center">
			<view class="tool-box">
				<view class="tool-box-title">
					常用工具
				</view>
				<view class="tool-box-content flex align-center justify-between flex-wrap">
					<!-- <view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/message/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/messige.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							消息中心
						</view>
					</view> -->
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/jilu/jilu')">
					<!-- 	<view class="tool-box-content-item flex align-center justify-center flex-wrap"
							@click="goNav('/me/jilu/histor')"> -->
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/vlishi.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							追剧历史
						</view>
					</view>
				 
					
					<view class="tool-box-content-item flex align-center justify-center flex-wrap" @click="goNav('/me/RechargeRecord/RechargeRecord')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/yijian.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							充值记录
						</view>
						
					</view>
					
					
					
					
				<!-- 	<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav()">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/bangzhu.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							消费记录
						</view>
					</view> -->
				<!-- 	<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/feedback/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/yijian.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							意见反馈
						</view>
					</view> -->
					
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/setting/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/setting.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							设置中心
						</view>
					</view>
					
					<button style="padding: 0; margin: 0; background: none; border: none;" class="imButton  tool-box-content-item flex align-center justify-center flex-wrap" open-type="im"
					  :data-im-id="imId"
					  @im="imCallback"
					  @error="onimError">
						<view class="tool-box-content-item-img" style="margin-top: 20rpx;">
							<image src="../../static/images/me/vkf.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							在线客服 9:00~22:00
						</view>
						
					</button>
					<view v-if="status" class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="outLogin">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/messige.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							退出登录
						</view>
					</view>
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
								>
					<!-- 	<view class="tool-box-content-item flex align-center justify-center flex-wrap"
							@click="goNav('/me/invite/index')"> -->
						<!-- 	<view class="tool-box-content-item-img">
								<image src="../../static/images/me/vfx.png" mode=""></image>
							</view>
							<view class="tool-box-content-item-txt">
								充值记录
							</view> -->
						</view>
						<view class="tool-box-content-item flex align-center justify-center flex-wrap"
								>
					<!-- 	<view class="tool-box-content-item flex align-center justify-center flex-wrap"
							@click="goNav('/me/invite/inviteDet')">
							<view class="tool-box-content-item-img">
								<image src="../../static/images/me/vtd.png" mode=""></image>
							</view>
							<view class="tool-box-content-item-txt">
								消费记录
							</view> -->
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShoMoney: false, //是否显示余额
				avatar: '../../static/images/logo.jpg',
				img: '../../static/images/me/huiyuan.png',
				swiperList: [{
					imageUrl: '../../static/images/me/banner.png',
				}],
				isLogin: false,
				userName: '未登录',
				isVIP: false,
				invitationCode: '',
				token: '',
				endTime: '', //会员到期时间
				moneyNum: 0, //余额
				moneyNum2:0,
				jifen: 0, //积分
				isVips: '否', //是否显示会员
				myLoveNum: 0, //我的喜欢个数
				myZhui: 0, //我的追剧数量
				imId:'chiguakefu',
				name:'',
				status:''
			}
		},
		onLoad() {
			this.getBannerList()
		},
		onShow() {
		
			this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
			this.token = uni.getStorageSync('token')
			this.avatar = uni.getStorageSync('avatarUrl')
			this.userName = uni.getStorageSync('nickName')
			this.status = uni.getStorageSync('loginStatu')
				this.getMyMoney()
			if (this.token && this.status) {
				this.getJifen()
				this.$u.api.userinfo().then(res => {
					if (res.code == 0 && res.data) {
						uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('avatar', res.data.avatar)
						// this.userName = res.data.userName
						// this.avatar = res.data.avatar
						this.invitationCode = res.data.invitationCode
					}
				})

				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$u.api.userVip(data).then(res => {
					if (res.code == 0 && res.data && res.data.isVip == 2) {
						this.isVIP = true;
						this.endTime = res.data.endTime
						uni.setStorageSync('isVIP', true)
					} else {
						this.isVIP = false;
						this.endTime = ''
						uni.setStorageSync('isVIP', false)
					}
				})

				this.isLogin = true
				this.userName = uni.getStorageSync('nickName')
				this.isVIP = uni.getStorageSync('isVIP')
				this.getMyLoveNum()
				this.getMyZhuiNum()
			} else {
				this.isLogin = false
				this.isVIP = false
				this.endTime = '' //会员到期时间
				this.moneyNum = 0 //余额
				this.jifen = 0 //积分
				this.userName = '未登录'
				this.invitationCode = ''
				this.myLoveNum = 0
				this.myZhui = 0
			}
			this.avatar = uni.getStorageSync('avatarUrl') ? uni.getStorageSync('avatarUrl') : '../../static/images/logo.jpg'
		},
		methods: {
				
			outLogin(){
				uni.showModal({
						title: '退出提醒',
						content: '确定要退出登录么',
						success: e => {
							if (e.confirm) {
								this.avatar = '../../static/images/me/head.png';
								this.userName = '';
								// this.isLogin = false
								// 清除本地数据
								uni.removeStorageSync('token')
								uni.removeStorageSync('userName')
								uni.removeStorageSync('avatar')
								uni.removeStorageSync('phone')
								uni.removeStorageSync('invitationCode')
								uni.removeStorageSync('sex')
								uni.removeStorageSync('userId')
								// uni.removeStorageSync('openId')
								uni.removeStorageSync('zhiFuBao')
								uni.removeStorageSync('zhiFuBaoName')
								uni.removeStorageSync('isVIP')
								uni.showToast({
									icon:'none',
									title:'退出登录成功'
								})
								setTimeout(function(){
									uni.switchTab({
										url: '/pages/index/index'
									})
								},1500)
							}
						}
					});
			},
			getPhoneNumber(e){
				   console.log(e.detail.errMsg);
				    console.log(e.detail.iv);
				    console.log(e.detail.encryptedData);
			},
			  imCallback(e) {
			    console.log("跳转IM客服成功", e.detail);
			  },
			  onimError(e) {
				  console.log(this.imId)
			    console.log("拉起IM客服失败", e.detail);
			  },
			//获取我喜欢的数量
			getMyLoveNum() {
				let data = {
					page: 1,
					limit: 1,
					classify: 2
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.myLoveNum = res.data.total
					} else {
						this.myLoveNum = 0
					}
				})
			},
			//获取我追剧的数量
			getMyZhuiNum() {
				let data = {
					page: 1,
					limit: 1,
					classify: 1
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.myZhui = res.data.total
					} else {
						this.myZhui = 0
					}
				})
			},
			/**
			 * 获取积分
			 */
			getJifen() {
				this.$Request.getT('/app/integral/selectByUserId').then(res => {
					if (res.code == 0) {
						this.jifen = res.data.integralNum
					} else {
						this.jifen = 0
					}
				})
			},
			/**
			 * @param {Number} num
			 * @param 保留两位小数
			 */
			formatNumber(num) {
				// 判断是否为整数
				if (Number.isInteger(num)) {
					return num.toFixed(2);
				} else {
					return num.toFixed(2).replace(/\.?0+$/, '');
				}
			},
			/**
			 * 获取余额
			 */
			getMyMoney() {
				this.$Request.getT('/app/moneyDetails/selectUserMoney').then(res => {
					if (res.code == 0) {
						// this.moneyNum = res.data.money
						this.$Request.getT('/app/invite/selectInviteMoney').then(ret => {
							console.log(ret,'ppppppppppppppppppppp')
							if (ret.code == 0) {
								if (ret.data.inviteMoney && ret.data.inviteMoney.money) {
									this.moneyNum = Number(res.data.money) + Number(ret.data.inviteMoney
										.money)
										
								} else {
									res.data.map(item=>{
										if(item.type == 1){
											this.moneyNum = Number(item.money)
										}
										if(item.type == 2){
											this.moneyNum2 = Number(item.money)
										}
									})
									
								}
							}
						})
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goPage(url) {
				if (url) {
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif	
					}
				}
			},
			goMsg() {
				let kefu = uni.getStorageSync('kefu'); // 用户端联系方式 1 手机号 2企业微信
				let kefuPhone = uni.getStorageSync('kefuPhone');
				if (kefu == 1) {
					uni.navigateTo({
						url: '/me/setting/kefu'
					})
				} else if (kefu == 3) {
					uni.makePhoneCall({
						phoneNumber: kefuPhone //仅为示例
					});
				} else if (kefu == 2) {
					// #ifdef MP-WEIXIN
					let that = this
					try {
						wx.openCustomerServiceChat({
							extInfo: {
								url: uni.getStorageSync('kefuUrl')
							},
							corpId: uni.getStorageSync('kefuAppId'),
							success(res) {},
							fail(res) {
								console.error(res)
							}
						})
					} catch (error) {
						console.error("catchcatch" + error)
						uni.showToast({
							title: '请更新至微信最新版本'
						});
					}
					// #endif
					// #ifndef MP-WEIXIN
					let url = uni.getStorageSync('kefuUrl');
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
					// #endif
				}
			},
			goNav(e) {
				console.log(e)
				let token = uni.getStorageSync('token')
				if (token) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			// 获取轮播图列表
			getBannerList() {
				this.$u.api.bannerList({
					classify: '3'
				}).then(res => {
					if (res.code == 0 && res.data) {
						let arr = []
						res.data.forEach(ret => {
							if (ret.state == 1) {
								arr.push(ret)
							}
						})
						this.swiperList = arr
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.imButton::after{
		border: none !important;
	}
	
	page {
		background-color: #F5F7FF;
	}

	.info {
		width: 100%;
		height: auto;
		// height: 400rpx;
		background: linear-gradient(0deg, #5874FB 0%, #768EFF 100%);
		border-radius: 0 0 80rpx 80rpx;

		.info-box {
			width: 686rpx;
			height: 100%;
		}

		.info-box-c {
			width: 100%;
			height: 78rpx;
			margin-top: 60rpx;
			margin-bottom: 140rpx;
		}

		.info-box-c-l-avatar {
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;

			image {
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
			}
		}

		.info-box-c-l-name {
			margin-left: 16rpx;

			.info-box-c-l-name-t {
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: bold;
			}

			.info-box-c-l-name-b {
				color: #F6F6F6;
				font-size: 26rpx;
				font-weight: 400;
			}
		}
	}

	.statistics {
		width: 100%;
		height: auto;
		margin-top: -100rpx;

		.statistics-box {
			width: 686rpx;
			height: 184rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
		}

		.statistics-box-item {
			width: calc(100% / 3);
			// height: 100%;
		}

		.statistics-box-item-top {
			width: 100%;
			text-align: center;
			color: #333333;
			font-size: 38rpx;
			font-weight: bold;
		}

		.statistics-box-item-btn {
			width: 100%;
			text-align: center;
			color: #999999;
			font-size: 26rpx;
			margin-top: 20rpx
		}
	}

	.vip {
		width: 100%;
		height: 84rpx;
		margin-top: 30rpx;

		.vip-box {
			width: 686rpx;
			height: 100%;
			background-color: #333333;
			border-radius: 16rpx;
			padding: 0 30rpx;
		}

		.vip-box-l {
			image {
				width: 24rpx;
				height: 22rpx;
				margin-left: 6rpx;
			}
		}

		.vip-box-l-l {
			font-size: 28rpx;
			font-weight: bold;
			color: #FFF0E5;
			line-height: 32rpx;
			background: linear-gradient(0deg, #D9C7A7 0%, #F1DEC3 44.921875%, #C8A076 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.vip-box-l-r {
			color: #FFE38E;
			font-size: 26rpx;
			margin-left: 20rpx;
		}

		.vip-box-r {
			width: 119rpx;
			height: 45rpx;
			background: linear-gradient(0deg, #FBE2B7 0%, #FCC573 100%);
			box-shadow: 0px -3rpx 9rpx 0rpx rgba(255, 255, 255, 0.46);
			border-radius: 23rpx;
			color: #9B5605;
			font-size: 22rpx;
		}
	}

	.money {
		width: 100%;
		height: auto;
		margin-top: 30rpx;

		.money-box {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			background: linear-gradient(-90deg, #91A4FF 0%, #5A77FB 100%);
			padding: 30rpx;
		}

		.money-box-title-l {
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}

		.money-box-price {
			color: #FFFFFF;
			font-size: 50rpx;
			margin-top: 36rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// text {
			// 	font-size: 30rpx;
			// }

		}

		.money-box-btn {
			margin-top: 38rpx;

			.money-box-btn-l {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;

				}
			}

			.money-box-btn-r-t {
				width: 194rpx;
				height: 64rpx;
				border-radius: 32rpx;
				background-color: #FFFFFF;
				color: #5173F8;
				font-size: 26rpx;
				margin-right: 30rpx;
			}

			.money-box-btn-r-c {
				width: 194rpx;
				height: 64rpx;
				border-radius: 32rpx;
				background-color: #5173F8;
				color: #FFFFFF;
				font-size: 26rpx;
			}
		}
	}

	.tool {
		width: 100%;
		height: auto;
		margin-top: 40rpx;

		.tool-box {
			width: 686rpx;
			height: 100%;
			background-color: #FFFFFF;
			border-radius: 24rpx;
		}

		.tool-box-title {
			width: 100%;
			line-height: 96rpx;
			color: #1A1A1A;
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 30rpx;
			border-bottom: 1px solid #E6E6E6;
		}

		.tool-box-content {
			width: 100%;
			height: auto;
			padding: 30rpx;
		}

		.tool-box-content-item {
			width: 130rpx;
			height: auto;
			margin-bottom: 46rpx;
		}

		.tool-box-content-item-img {
			width: 66rpx;
			height: 66rpx;

			image {
				width: 66rpx;
				height: 66rpx;
			}
		}

		.tool-box-content-item-txt {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
			color: #333333;
			font-size: 24rpx;
		}
	}

	// .menus {
	// 	width: 100%;
	// 	height: auto;
	// 	margin-top: 30rpx;

	// 	.menus-box {
	// 		width: 686rpx;
	// 		height: 100%;
	// 	}

	// 	.menus-box-item {
	// 		width: calc((100% - 30rpx) / 2);
	// 		height: 128rpx;
	// 		background-color: #FFFFFF;
	// 		box-shadow: 0px 8rpx 40rpx 0px rgba(0, 0, 0, .04);
	// 		border-radius: 32rpx;
	// 		margin-bottom: 20rpx;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;

	// 		image {
	// 			width: 64rpx;
	// 			height: 64rpx;
	// 		}

	// 		text {
	// 			margin-left: 40rpx;
	// 			color: #2e2f33;
	// 			font-size: 28rpx;
	// 			font-weight: 500;
	// 		}
	// 	}
	// }

	// .swipers {
	// 	width: 100%;
	// 	height: 260rpx;
	// 	margin-top: 30rpx;

	// 	.swipers-box {
	// 		width: 686rpx;
	// 		height: 100%;
	// 	}
	// }

	// .vip {
	// 	width: 100%;
	// 	margin-top: 20rpx;

	// 	.vip-box {
	// 		width: 686rpx;
	// 		height: 100%;
	// 		background: #fff;
	// 		// box-shadow: 0px 8rpx 40rpx 0px rgba(0, 0, 0, .04);
	// 		border-radius: 32rpx;
	// 	}

	// 	.vip-box-title {
	// 		color: #5c5e66;
	// 		font-size: 28rpx;
	// 		width: 100%;
	// 		text-align: center;
	// 		margin-top: 40rpx;
	// 	}

	// 	.vip-box-btn {
	// 		margin: 40rpx auto;
	// 		width: 300rpx;
	// 		height: 80rpx;
	// 		border-radius: 40rpx;
	// 		background-color: #5074FF;
	// 		color: #FFFFFF;
	// 		font-weight: bold;
	// 	}

	// 	.vip-box-con {
	// 		width: 100%;
	// 		height: 100%;
	// 		padding: 30rpx;
	// 	}

	// 	.vip-box-con-bg {
	// 		width: 100%;
	// 		height: 100rpx;
	// 		position: relative;
	// 		border-radius: 18rpx;

	// 		image {
	// 			width: 100%;
	// 			height: 100%;
	// 			border-radius: 18rpx;
	// 		}

	// 		.vip-box-con-bg-txt {
	// 			font-size: 24rpx;
	// 			padding: 4rpx 10rpx;
	// 			border-radius: 20rpx;
	// 			background-color: #FFFFFF;
	// 			position: absolute;
	// 			color: #999999;
	// 			top: 50%;
	// 			left: 30rpx;
	// 			transform: translate(0, -50%);
	// 		}

	// 		.vip-box-con-bg-tips {
	// 			font-size: 24rpx;
	// 			position: absolute;
	// 			top: 50%;
	// 			right: 100rpx;
	// 			transform: translate(0, -50%);
	// 		}

	// 		.vip-box-con-bg-icon {
	// 			width: 36rpx;
	// 			height: 36rpx;
	// 			border-radius: 50%;
	// 			position: absolute;
	// 			top: 50%;
	// 			right: 30rpx;
	// 			transform: translate(0, -50%);
	// 		}
	// 	}

	// 	.vip-box-con-money {
	// 		width: 100%;

	// 		.vip-box-con-money-num {
	// 			width: 100%;
	// 			margin-top: 40rpx;
	// 		}

	// 		.vip-box-con-money-num-l {
	// 			width: 200rpx;

	// 			view {
	// 				width: 100%;
	// 				text-align: center;
	// 			}

	// 			view:nth-of-type(1) {
	// 				font-size: 28rpx;
	// 				color: #aeb2c1;
	// 			}

	// 			view:nth-of-type(2) {
	// 				font-size: 36rpx;
	// 				font-weight: bold;
	// 			}
	// 		}

	// 		.vip-box-con-money-num-r {
	// 			width: 200rpx;

	// 			view {
	// 				width: 100%;
	// 				text-align: center;
	// 			}

	// 			view:nth-of-type(1) {
	// 				font-size: 28rpx;
	// 				color: #aeb2c1;
	// 			}

	// 			view:nth-of-type(2) {
	// 				font-size: 36rpx;
	// 				font-weight: bold;
	// 			}
	// 		}

	// 		.vip-box-con-money-icon {
	// 			width: 100%;
	// 			margin-top: 40rpx;
	// 			margin-bottom: 20rpx;
	// 		}

	// 		.vip-box-con-money-icon-r {
	// 			width: 76rpx;
	// 			height: 76rpx;
	// 			border-radius: 50%;
	// 			background-color: #5074FF;

	// 			image {
	// 				width: 40rpx;
	// 				height: 40rpx;
	// 			}
	// 		}

	// 		.vip-box-con-money-icon-l {
	// 			.vip-box-con-money-icon-l-cz {
	// 				width: 210rpx;
	// 				height: 76rpx;
	// 				border-radius: 40rpx;
	// 				background-color: #5074FF;
	// 				color: #FFFFFF;
	// 			}

	// 			.vip-box-con-money-icon-l-tx {
	// 				width: 210rpx;
	// 				height: 76rpx;
	// 				border-radius: 40rpx;
	// 				margin-left: 30rpx;
	// 				color: #5074FF;
	// 				border: 1px solid #5074FF;
	// 			}
	// 		}
	// 	}
	// }

	// .info {
	// 	width: 100%;
	// 	height: 160rpx;

	// 	.info-box {
	// 		width: 686rpx;
	// 		height: 100%;
	// 	}

	// 	.info-box-l-img {
	// 		width: 160rpx;
	// 		height: 160rpx;
	// 		border-radius: 50%;

	// 		image {
	// 			width: 160rpx;
	// 			height: 160rpx;
	// 			border-radius: 50%;
	// 		}
	// 	}

	// 	.info-box-l-info {
	// 		margin-left: 20rpx;

	// 		.info-box-l-info-top {
	// 			margin-bottom: 20rpx;
	// 			font-size: 32rpx;
	// 			color: #2e2f33;

	// 		}

	// 		.info-box-l-info-btom {
	// 			font-size: 24rpx;
	// 			color: #aeb2c1;
	// 		}
	// 	}
	// }


	// .btn-bg {
	// 	width: 64px;
	// 	height: 28px;

	// 	border-radius: 28px;
	// 	text-align: center;
	// 	line-height: 28px;

	// }

	// .grid-text {
	// 	margin-top: 5px;
	// }

	// .orderbox {
	// 	background: #FFFFFF;
	// 	display: flex;
	// 	border-radius: 24rpx;
	// 	padding: 29rpx 0;
	// 	margin: 0 30rpx;
	// 	position: absolute;
	// 	top: 85rpx;
	// 	left: 0;
	// 	right: 0;
	// 	z-index: 99;
	// }

	// // .mybox {
	// // 	background: #FFFFFF;
	// // 	display: flex;
	// // 	border-radius: 24rpx;
	// // 	margin: 150rpx 30rpx 0 30rpx;
	// // 	padding: 30rpx;

	// // 	.line {
	// // 		width: 1rpx;
	// // 		height: 90rpx;
	// // 		// border: 1rpx solid #E6E6E6;
	// // 		background: #E6E6E6;

	// // 	}

	// // 	.box {
	// // 		flex: 1;

	// // 	}
	// // }

	// .linbox {
	// 	background: #FFFFFF;
	// 	border-radius: 24rpx;
	// 	padding: 50rpx 30rpx;
	// 	margin: 150rpx 30rpx 0 30rpx;
	// }
</style>